<template>
	<!-- 1忘记密码 -->
	<el-dialog v-model="state.forgetPasswordDialog" title="忘记密码" width="400px">
		<el-form class="login-form" :label-position="labelPosition" :rules="rules">
			<el-form-item label="输入您的注册账号" prop="account">
				<el-input v-model="forgetData.account" placeholder="输入您的注册账号" />
			</el-form-item>
			<el-form-item label="输入您的个人邮箱" prop="email">
				<el-input v-model="forgetData.email" placeholder="输入您的个人邮箱" />
			</el-form-item>
		</el-form>
		<!-- 底部内容,插槽 -->
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.forgetPasswordDialog = false">取消</el-button>
				<el-button type="primary" @click="verifyAccount">下一步</el-button>
				<!-- openChangePassword -->
			</span>
		</template>
	</el-dialog>

	<!-- 2修改密码 -->
	<el-dialog v-model="state.changePasswordDialog" title="修改密码" width="400px">
		<el-form class="login-form" :label-position="labelPosition" :rules="rules">
			<el-form-item label="输入您的新密码" prop="password">
				<el-input v-model="forgetData.password" placeholder="输入您的新密码" show-password/>
			</el-form-item>
			<el-form-item label="再次确认您的新密码" prop="nextPassword">
				<el-input v-model="forgetData.nextPassword" placeholder="再次确认您的新密码" show-password/>
			</el-form-item>
		</el-form>
		<!-- 底部内容 -->
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.changePasswordDialog = false">取消</el-button>
				<el-button type="primary" @click="resetPassword">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
	import { ref,reactive } from 'vue';
	import { FormData }  from '../FormData';
	import { verify, reset } from '@/api/login.js';
	import { ElMessage } from 'element-plus';

	// 表单对齐方式,label-position 属性决定了标签的对齐方式，它可以是 top 或 left。当设置为 top 时，标签将放置在表单字段的顶部
	const labelPosition = ref('top')

	// 控制弹窗 默认关闭
	const state = reactive({
		forgetPasswordDialog: false,
		changePasswordDialog: false,
	})
	// 打开弹窗方法
	const open = () => {
		state.forgetPasswordDialog = true
	}

	// 表单对象
	const forgetData : FormData = reactive({
		account: null,
		email: '',
		password: '',
		nextPassword: '',
	})

	// 表单规则
	const rules = reactive({
		account: [
			{ required: true, message: '请输入您的注册账号', trigger: 'blur' },
		],
		email: [
			{ required: true, message: '请输入您的注册邮箱', trigger: 'blur' },
		],
		password: [
			{ required: true, message: '请输入您想修改的密码', trigger: 'blur' },
		],
    nextPassword: [
			{ required: true, message: '请再次确认您的新密码', trigger: 'blur' },
		],
	})


	// 打开验证邮箱和账号的弹窗
	const verifyAccount = async () => {
		// verify函数内部从传入的参数中解构出account和email,通过instance发送一个POST请求到指定的 URL /user/verifyAccountAndEmail，
		// 并携带解构出来的 account 和 email 数据
		const res = await verify(forgetData)
		// console.log(res.data.status);
		if(res.data.status == 0){
			ElMessage({
				message: '验证成功',
				type: 'success',
			})
			// TMD,data给老子加上！
			localStorage.setItem('id', res.data.id)  // local存储在浏览器本地存储空间，session 存储在会话空间
			state.forgetPasswordDialog = false
			state.changePasswordDialog = true
		}
		else{
			ElMessage.error('验证失败')
		}
	}

	// 修改密码方法弹窗
	const resetPassword = async() => {
		if(forgetData.password == forgetData.nextPassword){
			const newPassword = forgetData.nextPassword
			const res = await reset(localStorage.getItem('id'), newPassword)
			// console.log(res);
			if(res.data.status == 0){
        ElMessage({
					message: '修改成功',
					type: 'success',
				})
				state.changePasswordDialog = false
			}else{
			  ElMessage.error('修改失败，res.data.status!=0')
			}
		}else{
			  ElMessage.error('修改失败，请检查密码是否一致')
			}
	}

	// 向外暴露API,经常忘记！！表示将 open 方法暴露给父组件使用，这样父组件就能够调用这个方法来执行打开弹窗的操作
	defineExpose({
		open
	})
	
</script>
 
<style lang="scss" scoped>
	
</style>
